<!-- chatRoom -->
<template>
  <div>
    <div class="chartRoom">
      <div
        class="chartMessage"
        v-for="(item,index) in list"
        :key="index"
        :style="item.kind == 0?'text-align:right':''"
      >
        <template v-if="item.kind == 1">
          <div class="userInfo">
            <a-avatar
              class="avatar"
              icon="user"
              :size="32"
              :src="item.url"
            />
            <div class="username">{{item.name}}</div>
            <div class="chartTime">2020-08-25 14:56</div>
          </div>
          <div class="message">{{item.msg}}</div>
        </template>
        <template v-else>
          <div class="userInfo2">
            <div class="chartTime2">2020-08-25 14:56</div>
            <div class="username2">{{item.name}}</div>
            <a-avatar
              class="avatar2"
              icon="user"
              :size="32"
              :src="item.url"
            />
          </div>
          <div class="message2">{{item.msg}}</div>
        </template>
      </div>
    </div>
    <div class="toolbar">
      <a-icon
        @click.stop="showEmoji"
        type="smile"
        theme="outlined"
      />
      <emoji
        v-if="isShowEmoji"
        class="emoji"
        @addEmoji="addEmoji"
      ></emoji>
    </div>
    <a-textarea
      v-model="messageText"
      class="messageText"
      placeholder="随便说说吧"
      :rows="10"
      :maxLength="500"
    />
    <div
      class="submit_btn"
      @click="sendMessage"
    >
      <dv-border-box-8
        class="btn-inner"
        :reverse="true"
      >发送</dv-border-box-8>
    </div>

  </div>
</template>

<script>
import emoji from "../components/emoji";
export default {
  components: { emoji },
  data() {
    return {
      messageText: "",
      isShowEmoji: false,
      list: [
        {
          url: "http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png",
          name: "xiaozhan的放松放松g",
          msg:
            "鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa鸭瑟类啦雷，梁非凡！快去操场跑步！paopoa",
          kind: 1,
        }
      ],
    };
  },
  computed: {},
  watch: {},
  sockets: {
    // 名字不能改，服务触发方法的列表
    connect() {
      //与socket.io连接后回调
      console.log("socket connected");
    },
    // 接受后台广播，与服务端保持一致，data 后台返回数据
    user(data) {
      // 执行的操作
      //   console.log(`后台返回${data}`);
      this.list.push({
        url: "http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png",
        name: "xiaozhan的放松放松g",
        msg: data,
        kind: 1,
      })
    },
  },
  methods: {
    showEmoji() {
      this.isShowEmoji = !this.isShowEmoji;
    },
    addEmoji(data) {
      this.messageText = `${this.messageText}${data}`;
    },
    sendMessage() {
      this.$socket.emit("chatmessage", { msg: this.messageText }, (res) => {
        if (res.code == 200) {
          this.list.push({
            url: "http://139.196.163.92:3000/images/8710r4f9sy1597843015225.png",
            name: "xiaozhan的放松放松g",
            msg: this.messageText,
            kind: 0
          })
          this.messageText = ''
        }
      });
    },
  },
  created() { },
  mounted() {
    document.addEventListener("click", (e) => {
      console.log(e.target.className);
      if (e.target.className != "emoji-item") {
        this.isShowEmoji = false;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.chartRoom {
  width: 100%;
  height: 70%;
  overflow-x: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .chartMessage {
    margin-top: 10px;
    .userInfo {
      display: flex;
      align-items: center;
      .avatar {
        min-width: 32px;
        min-height: 32px;
      }
      .username {
        color: #fff;
        font-size: 1.3rem;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chartTime {
        color: #fff;
        font-size: 0.8rem;
        margin-left: 10px;
      }
    }
    .userInfo2 {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .avatar2 {
        min-width: 32px;
        min-height: 32px;
      }
      .username2 {
        color: #fff;
        font-size: 1.3rem;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chartTime2 {
        color: #fff;
        font-size: 0.8rem;
        margin-left: 10px;
      }
    }
    .message {
      display: inline-block;
      padding: 0.5rem;
      background-color: rgb(17, 21, 84);
      border-radius: 0.5rem;
      margin-top: 0.1rem;
      margin-left: 42px;
      color: #fff;
    }
    .message2 {
      display: inline-block;
      right: 0;
      padding: 0.5rem;
      background-color: rgb(17, 21, 84);
      border-radius: 0.5rem;
      margin-top: 0.1rem;
      margin-right: 42px;
      color: #fff;
    }
  }
}
.toolbar {
  display: flex;
  align-items: center;
  color: #fff;
  height: 4%;
  border-bottom: 1px solid #fff;
  .emoji {
    position: absolute;
    bottom: 27vh;
    background-color: #000;
  }
}
.messageText {
  background-color: #000;
  color: #fff;
  margin-top: 0.5vh;
  height: 16.5%;
}
.submit_btn {
  height: 9.5%;
  padding: 1% 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  .btn-inner {
    width: 20%;
    /deep/ .border-box-content {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
</style>